<template>
    <!-- 交班对象所在组： -->
    <div class="Handover">
        <el-form
            :model="hadoverForm"
            class="formdata"
            label-width="135px"
            label-position="right"
            size="small"
            ref="hadoverForm"
            :rules="formRules"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="交班对象所在组：" prop="teamNameSelect">
                        <el-select
                            class="select_top"
                            v-model="hadoverForm.teamNameSelect"
                            placeholder="请选择交班对象所在组"
                            @change="getTakenInfoData"
                            clearable
                        >
                            <el-option
                                class="select_top_item"
                                v-for="item in teamName"
                                :label="item.leaderName"
                                :value="item.id"
                                :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交班对象姓名：" prop="succeedName">
                        <el-select
                            class="select_top"
                            v-model="hadoverForm.succeedName"
                            placeholder="请选择要交班的坐席姓名"
                            @change="getAccountInfoFun"
                            clearable
                            value-key="key"
                        >
                            <el-option
                                class="select_top_item"
                                v-for="item in AccountData"
                                :label="item.userName"
                                :value="item"
                                :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="交班对象工号：">
                        <el-input v-model="hadoverForm.succeedAccount" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="交班内容：" prop="content">
                        <el-input
                            v-model="hadoverForm.content"
                            type="textarea"
                            :autosize="{minRows:6,maxRows:7}"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="text_center">
            <el-button
                type="primary"
                size="small"
                icon="el-icon-circle-check"
                @click="addAccountHadoberInfo"
            >提 交</el-button>
            <el-button
                type="primary"
                size="small"
                icon="el-icon-circle-close"
                @click="handleclickClose"
            >取 消</el-button>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
    name: 'Handover',
    props: {
        // 点击 删除的方法
        handleclickClose: {
            required: true,
            type: Function,
        }
    },
    data() {
        return {
            hadoverForm: {
                succeedAccount: '',//工号
                succeedName: '',//姓名
                succeedTypeClass: '',//班次 
                content: '',//内容
                teamNameSelect: '',//小组名称
            },

            classes: '',//班次信息
            teamName: [],//小组信息

            teamID: '',//小组id
            AccountData: [],//坐席信息
            // AccountDataSelect: '',//选中的坐席信息
            formRules: {
                teamNameSelect: [
                    { required: true, message: '交班对象所在组必填', trigger: 'blur' },
                ],
                succeedName: [
                    { required: true, message: '交班的坐席姓名必填', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '交班内容必填', trigger: 'blur' },
                ]
            }
        }
    },
    computed: {
        ...mapGetters([
            'userAssociate',
            'userInfo',
        ])
    },
    async mounted() {
        await this.getTeamfInitData();
    },
    methods: {
        // 获取所有组信息
        async getTeamfInitData() {
            await this.$post.busiReport.teamfindAll().then((res) => {
                if (res.data.success) {
                    this.teamName = res.data.content;
                    console.log('小组信息', this.teamName);
                }
            });
        },
        // 获取小组下 所有坐席信息
        getTakenInfoData(value) {
            console.log('坐席信息ID', value);
            let parent = {
                id: value
            }
            this.$post.busiReport.findUserByTeam(parent).then((res) => {
                if (res.data.success) {
                    console.log('坐席信息', res.data.content);
                    this.AccountData = res.data.content;
                }
            });
        },
        // 获取坐席信息
        getAccountInfoFun(item) {
            console.log('坐席详细信息', item);
            this.hadoverForm.succeedName = item.userName;
            this.hadoverForm.succeedAccount = item.userAccount;
        },
        // 提交 交接班数据
        addAccountHadoberInfo() {
            this.$refs.hadoverForm.validate((valid) => {
                if (valid) {
                    let parent = {
                        handoverAccount: this.userInfo.userAccount,
                        handoverName: this.userInfo.userName,
                        handoverTypeClass: this.userAssociate.typeClass,
                        succeedAccount: this.hadoverForm.succeedAccount,
                        succeedName: this.hadoverForm.succeedName,
                        content: this.hadoverForm.content,
                        // succeedTypeClass: "C1"
                    };
                    this.$post.information.addHandover(parent).then((res) => {
                        if (res.data.success) {
                            this.$message.success('交接班数据已提交！');
                            this.handleClose();
                            this.handleclickClose();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                }
            })
        },
        handleClose() {
            this.hadoverForm.teamNameSelect = '';
            this.hadoverForm.succeedName = '';
            this.hadoverForm.succeedAccount = '';
            this.hadoverForm.succeedTypeClass = '';
            this.hadoverForm.content = '';
        },

    },
}
</script>
<style lang="scss">
.Handover {
    .el-form-item__content {
        text-align: left;
    }
}
</style>
<style scoped lang="scss">
.Handover {
    min-width: 500px;
}
</style>